import React, { useMemo } from 'react'
import { Button, Result } from 'antd'
import { useNavigate, useLocation } from 'react-router-dom'
import { allRoutePath } from '@/router/utils'
import { SELECTED_KEY } from '@/utils/storage/constant'
import storage from '@/utils/storage'

const NotFound: React.FC = () => {
  const navigate = useNavigate()
  const { pathname } = useLocation() as { pathname: string }

  const pageMessage = useMemo(() => {
    const paths = allRoutePath()
    const isAuthorized = paths.includes(pathname)
    storage.setStorage(SELECTED_KEY, pathname)

    const notAuth = {
      status: '403',
      title: '403',
      subTitle: 'Sorry, you are not authorized to access this page.'
    }

    const notFound = {
      status: '404',
      title: '404',
      subTitle: 'Sorry, the page you visited does not exist.'
    }

    return isAuthorized ? notAuth : notFound
  }, [pathname])

  return (
    <Result
      status={pageMessage.status as any}
      title={pageMessage.title}
      subTitle={pageMessage.subTitle}
      extra={<Button type='primary' onClick={() => navigate('/', { replace: true })}>Back Home</Button>}
    />
  )
}

export default NotFound